<template>
	<view>
		<view class="app-header-wrapper">
			<view class="app-header-left">
				<view class="app-header-item">
					<view class="image-icons app-header-icon icon-back" @click="Back">
						<image src="../../static/images/left_b.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="app-header-middle">
				<view class="app-header-title text-ellipsis">
					问题详情
				</view>
			</view>
			<view class="app-header-right"></view>
		</view>
		<template v-if="Object.keys(dataInfo).length==0">
			<view class="load">
				<u-loading-page :loading="true"></u-loading-page>
			</view>
		</template>
		<template v-else>
			<view class="mi-circle-product" :style="`min-height: calc(100vh - 0.96rem);`">
				<view class="product-header maxW" @click="toProDetail(dataInfo)">
					<view class="img-box">
						<image :src="dataInfo.product_img_url" mode=""></image>
					</view>
					<view class="title">
						{{dataInfo.product_name}}
					</view>
				</view>
				<view class="question-list">
					<view class="title">
						{{dataInfo.question}}
					</view>
					<view class="author">
						<image :src="dataInfo.avatar" mode="">
						</image>
						<view class="tips">
							<view class="name">
								{{dataInfo.nickname}}
							</view>
							<view class="time">
								提问于{{dataInfo.create_time}}&nbsp;{{dataInfo.belong_place}}
							</view>
						</view>
						<view class="follow-btn">
							关注问题
						</view>
					</view>
				</view>
				<view class="answer-list">
					<view class="answer-title el-flex">
						<view class="total">
							共 {{dataInfo.answer_num}} 条讨论
						</view>
						<view class="switch">
							<view class="btn1" :class="{active:is_hot}" @click="is_hot=!is_hot">
								热门
							</view>
							<view class="btn2" :class="{active:!is_hot}" @click="is_hot=!is_hot">
								最新
							</view>
						</view>
					</view>
					<view class="touchBox list-container">
						<block v-for="(item,index) in answer_list" :key="index">
							<view class="show-answer-list">
								<view class="user-info">
									<view class="user-profile">
										<image :src="item.avatar" mode=""></image>
									</view>
								</view>
								<view class="right-box">
									<view class="name">
										{{item.nickname}}
										<text class="time">{{item.create_time}}&nbsp;{{item.belong_place}}</text>
										<text class="buy" v-if="item.is_buy">已购</text>
									</view>
									<view class="context">
										{{item.answer_content}}
									</view>
									<view class="handler">
										<view class="handler-item">
											<text v-if="item.support_num!=0">{{item.support_num}}</text>
											<image src="../../static/images/par.png" mode="widthFix"></image>
										</view>
									</view>
									<view class="reply-list" v-if="item.secondary_data.answer_list.length!==0">
										<view class="reply-item" v-for="(i,j) in item.secondary_data.answer_list"
											:key="j">
											<view class="p">
												<text class="reply-name">
													{{i.nickname}} :
												</text>
												{{i.answer_content}}
											</view>
											<view class="p">
												<text class="reply-name">
													{{i.belong_place}}
												</text>
											</view>
										</view>
									</view>
								</view>
							</view>

						</block>
					</view>
				</view>
				<view class="bottom-action maxW">
					<view class="bottom-action-left">
						<view class="bottom-action-btn">
							<image src="../../static/images/pen.png" mode=""></image>
							一起讨论吧
						</view>
					</view>
					<view class="bottom-action-right">
						<view class="bottom-action-ctrl">
							<view class="action-icon">
								<image src="../../static/images/m_b_share.png" mode=""></image>
							</view>
							<view class="action-icon">
								<image src="../../static/images/m_b_praisa.png" mode=""></image>
								<text>{{dataInfo.praise_num}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

		</template>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				q_id: '',
				dataInfo: {},
				is_hot: true,
				after: '',
				page: 1,
				answer_list: [],
				loadAll: false
			};
		},
		onReachBottom() {
			if (this.loadAll) return;
			if (this.after == '') {
				this.after = 0;
				this.page = 0
			}
			this.after = this.after + 10
			this.page++
			this.getQuestionAnswerList(true)
		},
		watch: {
			is_hot(newVal) {
				this.after = ''
				this.page = 1
				this.loadAll = false
				this.getQuestionAnswerList()
			}
		},
		methods: {
			toProDetail(item) {
				uni.navigateTo({
					url: `/subPage/proddetail/proddetail?id=${item.product_id}`,
				})
			},
			Back() {
				uni.navigateBack(-1)
			},
			getCommunicateQuestionDetail() {
				this.$request.get('/getCommunicateQuestionDetail', {
					q_id: this.q_id,
				}).then((res) => {
					this.dataInfo = res.data.data
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
			getQuestionAnswerList(flag) {
				this.$request.get('/getQuestionAnswerList', {
					q_id: this.q_id,
					after: this.after,
					page: this.page,
					is_hot: this.is_hot
				}).then((res) => {
					let list = res.data.data.answer_list
					if (list.length == 0) {
						this.loadAll = true
					}
					if (flag) {
						this.answer_list = this.answer_list.concat(list)
					} else {
						this.answer_list = list
					}
				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		onLoad(e) {
			this.q_id = e.id
			this.getCommunicateQuestionDetail()
			this.getQuestionAnswerList()
		}
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
	}

	.app-header-wrapper {
		background-color: rgb(242, 242, 242);
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 50%;
		width: 7.2rem;
		transform: translateX(-50%);
		border-bottom: 1px solid #f5f5f5;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: .96rem;
		color: #666;
		padding: 0;
		transition: transform .2s ease-out;

		&>view {
			display: flex;
			align-items: center;
		}

		.app-header-item {
			display: block;
			width: 0.6rem;
			margin: 0 0.2rem;
		}

		.app-header-left {

			.app-header-item {

				.icon-back {
					width: 0.5rem;
					height: 0.5rem;
					line-height: .6rem;

					image {
						width: 0.5rem;
						height: 0.5rem;
					}
				}
			}
		}

		.app-header-middle {
			flex: 1;
			text-align: center;
			min-width: 0;

			.app-header-title {
				color: rgb(102, 102, 102);
				width: 100%;
				font-size: .3rem;
			}
		}

		.app-header-right {
			min-width: 1rem;
		}
	}

	.mi-circle-product {
		padding-top: .96rem;
		background: #f5f5f5 !important;

		.product-header {
			height: 0.8rem;
			padding: 0 0.32rem;
			box-sizing: border-box;
			position: fixed;
			z-index: 9999;
			top: .96rem;
			left: 0;
			right: 0;
			background: #fafafa;
			display: flex;
			align-items: center;

			.img-box {
				border-radius: 0.08rem;
				margin-right: 0.24rem;
				line-height: .72rem;

				image {
					width: 0.43rem;
					height: 0.57rem;
					vertical-align: middle;
				}
			}

			.title {
				font-size: .24rem;
				color: #000;
				line-height: .28rem;
			}
		}

		.question-list {
			background: #fff;
			padding: 0.26rem 0.32rem 0.32rem;
			margin-top: .96rem;
			text-align: left;

			.title {
				font-size: .32rem;
				line-height: .48rem;
			}

			.author {
				margin-top: 0.32rem;
				display: flex;
				align-items: center;

				image {
					width: 0.48rem;
					height: 0.48rem;
					border-radius: 0.24rem;
					margin-right: 0.2rem;
				}

				.tips {
					.name {
						font-size: .24rem;
					}

					.time {
						font-size: .2rem;
						color: rgba(0, 0, 0, .3);
						padding-top: 0.05rem;
					}

					
				}

				.follow-btn {
					width: 1.28rem;
					height: 0.48rem;
					background: rgba(255, 89, 52, .07);
					border-radius: 0.24rem;
					font-size: .24rem;
					color: #ff5934;
					line-height: .48rem;
					text-align: center;
					margin: 0.24rem 0 0 auto;
					display: block;
				}
			}
		}

		.answer-list {
			padding-bottom: 1.16rem;
			margin-top: 0.16rem;
			background: #fff;
			overflow: hidden;

			.answer-title {
				height: 0.88rem;
				line-height: .88rem;
				border-bottom: 1px solid hsla(0, 0%, 59%, .2);
				padding: 0 0.32rem;
				font-size: .24rem;
				justify-content: space-between;

				.total {
					font-size: .24rem;
					color: rgba(0, 0, 0, .4);
				}

				.switch {
					width: 1.69rem;
					height: 0.48rem;
					background: #f6f6f6;
					border-radius: 0.24rem;
					font-size: .24rem;
					line-height: .4rem;
					box-sizing: border-box;
					border: 0.05rem solid #f6f6f6;

					.btn1 {}

					view {
						line-height: .4rem;
						text-align: center;
						font-size: .24rem;
						display: inline-block;
						width: 50%;
						border-radius: 0.24rem;
					}

					.btn2 {}

					.active {
						background: #fff;
						color: #ff5934;
					}
				}
			}

			.touchBox {
				padding: 0 0.32rem;

				.show-answer-list {
					margin-top: 0.2rem;
					position: relative;
					flex-wrap: nowrap;
					display: flex;

					.user-info {
						.user-profile {
							width: 0.52rem;
							height: 0.52rem;
							border-radius: 50%;
							margin-right: 0.2rem;
							overflow: hidden;

							image {
								width: 0.52rem;
								height: 0.52rem;
							}
						}
					}

					.right-box {
						border-bottom: 0.01rem solid rgba(0, 0, 0, .1);
						text-align: left;
						width: 100%;

						.name {
							margin-bottom: 0.06rem;
							display: flex;
							align-items: center;
							font-size: .24rem;
							color: #999;

							.time {
								margin-left: 0.1rem;
								padding: 0.05rem;
							}
							.buy {
								border-radius: 0.06rem;
								display: block;
								color: #ff5934;
								font-size: .16rem;
								margin-left: 0.08rem;
								padding: 0.03rem 0.07rem;
								border: 1px solid #ff5934;
							}
						}

						.context {
							font-size: .26rem;
							font-weight: 400;
							color: #333;
							margin: 0.06rem 0 0.2rem;
							line-height: 1.6;
						}

						.handler {
							position: absolute;
							top: 0;
							right: 0;

							.handler-item {
								flex: 1;
								text-align: center;
								position: relative;

								text {
									line-height: .32rem;
									vertical-align: middle;
									margin-right: 0.05rem;
									font-size: .22rem;
								}

								image {
									width: 0.32rem;
									vertical-align: middle;
									margin-right: 0.08rem;
								}
							}
						}

						.reply-list {
							background: #fafafa;
							border-radius: 0.08rem;
							padding: 0.2rem 0.2rem 0;
							margin-bottom: 0.27rem;
							font-size: .24rem;

							.reply-item {
								.p {
									font-size: .24rem;
									padding-bottom: 0.2rem;
									color: rgba(0, 0, 0, .87);
									position: relative;

									.reply-name {
										color: rgba(0, 0, 0, .5);
										margin-right: 0.1rem;
									}
								}

							}
						}
					}
				}
			}
		}

		.bottom-action {
			display: flex;
			align-items: center;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 0.15rem 0 0.15rem 0.24rem;
			background-color: #fff;
			box-sizing: border-box;
			border-top: 1px solid #f5f5f5;
			z-index: 99;

			.bottom-action-left {
				flex: 1;

				.bottom-action-btn {
					height: 0.66rem;
					line-height: .66rem;
					border-radius: 0.66rem;
					padding: 0 0.16rem;
					background: #f6f6f6;
					font-weight: 500;
					color: #999;
					font-size: .26rem;
					text-align: left;
					display: flex;
					align-items: center;

					image {
						display: inline-block;
						margin-right: 0.09rem;
						width: 0.34rem;
						height: 0.34rem;
					}
				}
			}

			.bottom-action-right {
				.bottom-action-ctrl {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.action-icon {
						display: flex;
						align-items: center;
						justify-content: center;

						width: 20vw;

						image {
							width: 0.4rem;
							height: 0.4rem;
						}

						text {
							font-size: .26rem;
							color: #666;
							font-weight: 500;
						}
					}
				}
			}
		}
	}
</style>